<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>蓝桥许愿墙</title>
		<!-- 引入element-ui样式 --> 
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="./css/wish.css">
		<!-- 引入element-ui组件库 -->  
		<script src="js/vue.min.js"></script> 
		<script src="./js/index.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>蓝桥许愿墙</h1>
			<div class="container">
				<div class="card" :class="item.css" v-for="(item,index) in wishList" :key="index">
					<div class="header">
						<img class="close" @click="closeCard(index)" src="./images/ding.png" alt="close">
					</div>
					<el-image
					    v-if="item.pic"
					    style="width: 100px; height: 100px"
					    :src="item.pic" 
					    :preview-src-list="picList">
					  </el-image>
					<div class="content"> 
						{{item.content}}
					</div>
					<div class="name">{{item.name}}</div>
				</div>
			</div>
			<div class="form">
				<el-form ref="form" :rules="rules" label-position="left" :model="form" label-width="80px">
					<el-form-item label="姓名" prop="name">
						<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="许愿内容" prop="content">
						<el-input type="textarea" placeholder="请输入内容" v-model="form.content" maxlength="30" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="图片上传">
					<el-upload
					  ref="uploadRef"
					  action="#"
					  :limit="1"
					  list-type="picture-card" 
					  :on-remove="handleRemove"
					  :on-change="getPic"
					  :auto-upload="false">
					    <i slot="default" class="el-icon-plus"></i>
					    <div slot="file" slot-scope="{file}">
					      <img
					        class="el-upload-list__item-thumbnail"
					        :src="file.url" 
					      >
					      <span class="el-upload-list__item-actions">
					        <span
					          class="el-upload-list__item-preview"
					          @click="handlePictureCardPreview(file)"
					        >
					          <i class="el-icon-zoom-in"></i>
					        </span>  
							<span
								v-if="!disabled"
								class="el-upload-list__item-delete"
								@click="handleRemove(file)">
							<i class="el-icon-delete"></i>
							</span>
					      </span> 
					    </div>
					</el-upload> 
					</el-form-item>
					<el-form-item>
					    <el-button type="primary" @click="onSubmit">发布</el-button>
					    <el-button @click="onRest">重置</el-button>
					</el-form-item>
				</el-form>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="form.pic" alt="">
				</el-dialog>
			</div>
		</div> 
	</body>
	<script>
		const app = new Vue({
			el: "#app",
			data: { 
				wishList: [], 
				form: {
					name:'',
					content: '',
					pic: ''
				},
				rules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' },
						{ min: 2, max: 4, message: '长度在 2 到 4 个字', trigger: 'blur' }
					  ],
					  content: [
						{ required: true, message: '请输入许愿内容', trigger: 'blur' },
						{ min: 1, max: 30, message: '长度在 1 到 30 个字', trigger: 'blur' }
					]
				},
				num:1,
				picList: [],
				textarea: '', 
				dialogVisible: false,
				disabled: false
			},
			methods: { 
				// 提交方法
			  onSubmit() {
				  // TODO 验证表单输入
				  this.$refs['form'].validate((valid) => {
					if (valid) {
					  let obj = this.form;
					  obj.css = 'item' + this.num;
					  this.num++;
					  if(this.num > 4) {
						this.num = 1;
					  }
					  this.wishList.push(obj)
					  this.form = {};
					  this.$refs.uploadRef.uploadFiles.pop()  
					  console.log(this.wishList);
					} else { 
					  this.$message({
						message: '提交错误！请检查输入内容',
						type: 'warning'
					  });
					  return false;
					}
				  });
					
			  },
			  // 关闭许愿卡
			  closeCard(index) {
				  // TODO 关闭许愿卡
				  this.wishList.splice(index,1)
			  },
			  // 重置表单
			  onRest() {
				  // TODO 重置表单
				  this.$refs['form'].resetFields();
			  },
			 // 图片删除
			  handleRemove(file) {
				  // TODO 图片删除
				  let index = this.$refs.uploadRef.uploadFiles.findIndex(e => e.uid === file.uid);
				  this.$refs.uploadRef.uploadFiles.splice(index,1); 
			  },
			  // 模拟上传图片
			  getPic(e) { 
				  this.form.pic = e.url;
				  this.picList.push(e.url)
			  }, 
			  // 预览图片
			  handlePictureCardPreview(file, fileList) {
				this.form.pic = file.url;
				this.dialogVisible = true;
			  }
			}
		});
	</script>
</html>
